<template>
  <div id="app" :class="IsFilter=='0'?'hui':''">
    <span class="fangda" @click="enlarge">{{scal==1?'放大':'缩小'}}</span>
    <router-view v-if="isshow" />
  </div>
</template>

<script>
import {heartbeat} from "@/api/ip"
import Cookies from 'js-cookie'
import {  columnqueryAll } from "@/api/webpage";
import { getConfig
} from "@/api/webviews";
export default {
  name: 'App',
  data(){
    return{
      navdata:[
      [],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]
    ],
    scal:1,
    isshow:false,
    IsFilter:'1'
    }
  },
  created(){
    this.getIsFilter()
    this.getcolumn()
    if(Cookies.get("scal")){
      this.scal = Cookies.get("scal")
     this.$nextTick(()=>{
      let imageWrapper = document.getElementById('app');
      imageWrapper.style.transform = "scale(" + Cookies.get("scal") + ")";
      imageWrapper.style.transformOrigin = '50% 0';
     })

    }else{
      Cookies.set('scal',1)
    }

    setInterval(() => {
       this.get()
      }, 60000);
  },
  methods: {
    getIsFilter(){
      getConfig({ key: 'isFilter' }).then(res => {
        console.log(res)
        this.IsFilter =  res.data
      })
    },
    // 获取栏目
    getcolumn(){
      let data = {
          name: "",
          code: "",
          parentId: '',
      };
      let _this = this
      columnqueryAll(data).then((res) => {
          if (res.code == 0) {
            console.log('123',res);
            this.navdata.forEach((n,i)=>{
              res.data.forEach(item => {
                // 去掉审核管理栏目
                if(item.icon!="" && item.icon == i){
                  n.push({name:item.name,id:item.id})
                }
              });
            })
            this.navdata[0].push({name:'推荐阅读',id:'99999'})
            console.log('处理后的数据栏目',this.navdata);
            // console.log(2121212,this.navdata);
            // for(var i=0;i<16;i++){
            //   console.log(i);
            //   res.data.forEach(item => {
            //     if(item.icon == i){
            //       _this.navdata[i].push(
            //         {name:item.name,id:item.id},
            //       )
            //     }

            //     // return { label: item.name, value: item.id }
            //   });
            // }
            Cookies.set('navdata', JSON.stringify(this.navdata))
            this.isshow = true
              console.log("🚀 ~ file: App.vue ~ line 102 ~ columnqueryAll ~ res", res)
              console.log("🚀 ~ file: App.vue ~ line 102 ~ columnqueryAll ~ res", this.navdata)
              // this.options = res.data.map(item => {
              //     return { label: item.name, value: item.id }
              // });
          }
      });
    },
    get(){
      heartbeat().then(res=>{

      }).catch(()=>{

      })
    },
    // 放大
    enlarge() {
      this.$nextTick(() => {
      	// imageWrapper 获取元素
        let imageWrapper = document.getElementById('app');
        if(this.scal == 1){
          console.log('放大');
          this.scal =1.3
          Cookies.set('scal',1.3)
        }else{
          console.log('缩小');
          this.scal = 1
          Cookies.set('scal',1)
        }
        imageWrapper.style.transform = "scale(" + this.scal + ")";
        imageWrapper.style.transformOrigin = '50% 0';
      })
    }

  }

}
</script>
<style scoped>
.hui{
  filter: grayscale(100%)
}
.fangda{
    position: fixed;
    left: 50%;
    margin-left:650px ;
    top: 0;
    z-index: 999;
    display: block;
    background: #017FE7;
    border-radius: 0 0 10px 10px;
    font-size: 18px;
    color: #fff;
    padding: 20px 15px;
    cursor: pointer;
  }
</style>
